<template lang="html">
  <div class="musiclist">
     <div class="board panels">
      <div class="panel hotsongs on">
        <ul class="list">
          <router-link :to="{name:'Play',params:{id:item.song_id}}" tag="li" class="song url" v-for="(item,index) in currentData" :key="index">
            <div class="poster">
              <img :src="item.pic_big" :alt="item.title">
            </div>
            <div class="info">
              <div class="name">
                  {{ item.title }}
              </div>
              <div class="author">{{ item.artist_name }}</div>
            </div>
          </router-link>
        </ul>
        <div class="more-songs url">
            查看该榜单&gt;
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
	name:"musiclist",
	data(){
		return{
           currentData:[]
		}
	},
	props:{
		typeMusic:{
			type:[String,Number],
			default:0
		},
		size:{
			type:[String,Number],
			default:0
		},
		offset:{
			type:[String,Number],
			default:0
		}
	},
	mounted(){
       this.$axios.get(this.HOST+"/v1/restserver/ting",{
       	params:{
          method:'baidu.ting.billboard.billList',
          type:this.typeMusic,
          size:this.size,
          offset:this.offset
       	}
       }).then(res=>{
       	  this.currentData=res.data.song_list
       }).catch(error=>{
       	this.ErrorInfo("musiclist",error)
       })
	},
	methods:{
		 ErrorInfo(type,error){
      console.log(type+':'+error)
    }
	}


}
</script>

<style lang="css" scoped>

.board{
  margin-bottom: 10px;
}

.panel {
    border-top: 1px solid #eee;
    position: relative;
    top: -1px;
    display: block;
    background: #fff;
}

.list{
  padding: 20px;
  padding-top: 0;
  height: 375px;
}

.panel .list li {
    height: 60px;
    border-bottom: 1px solid #eee;
    padding-left: 0;
    display: flex;
    padding-top: 10px;
}

.panel .list li .poster {
    position: relative;
    width: 45px;
    margin-right: 8px;
}

.panel .list li .poster img {
    border: 1px solid #eee;
}
.info{
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.info .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    color: #333;
}

.info .author {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

.more-songs {
    color: #999;
    margin-top: 9px;
    font-size: 12px;
    text-align: center;
    height: 32px;
    line-height: 32px;
}
</style>
